import { Form } from "antd";
import { IFormItemConfig } from "../type";
import { getComponentConfig } from "../utils/getComponentConfig";
import { getRenderComponent } from "../utils/getRenderComponent";

interface IFormItemProps {
    formItemConfig: IFormItemConfig
}

const FormItem = (props: IFormItemProps) => {
    const { formItemConfig } = props
    const { colSpan, name, label, required, type, placeholder } = formItemConfig;
    const Component = getRenderComponent(formItemConfig)

    const componentConfig = getComponentConfig(formItemConfig)

    console.log(17, componentConfig)

    return (<Form.Item
        name={name}
        label={<label>{label}</label>}
        rules={[
            { required: required, message: formItemConfig.requiredMessage || placeholder || `请输入${label}` }
        ]}
    >
        {/* 这里可以根据type渲染不同的组件 */}
        <Component placeholder={placeholder} {...componentConfig} />
    </Form.Item>)
}

export default FormItem